<template>
	<view class="container" :style="[ctop()]">
		<view :style="[top()]" class="top fixed">
			<view class="flex j-between a-center top">
				<view class="logo" @tap="back()">
					<u-icon name="arrow-left" size="40" color="#333"></u-icon>
				</view>
				<view class="flex a-center search" @tap="goto('/pages/search')">
					<view class="s-icon">
						<image class="image" src="../static/icon/idx/idx(5).png"></image>
					</view>
					<u-input placeholder="搜索任务"></u-input>
				</view>
				<view class="flex a-center j-end sbtn">
					<view>搜索</view>
				</view>
			</view>
		</view>
		<view class="key">
			<view class="flex j-between a-center">
				<view class="s-title">搜索历史</view>
				<u-icon name="trash" size="40" color="#999"></u-icon>
			</view>
			<view class="flex wrap" style="margin-bottom: 32rpx;">
				<view class="item flex j-center a-center" v-for="item,i in history" :key="i">
					<view>{{item}}</view>
				</view>
			</view>
			<view class="flex j-between a-center">
				<view class="s-title">搜索发现</view>
			</view>
			<view class="flex wrap">
				<view class="item flex j-center a-center" v-for="item,i in discory" :key="i">
					<view>{{item}}</view>
				</view>
			</view>
		</view>
		<view class="result">
			<view class="sort flex j-between a-center">
				<view class="flex a-center" v-for="(item,i) in sort" :key="i" :class="{'crt-sort':i == sort_crt}" @tap="sorts(i)">
					<view class="s-name">{{item.name}}</view>
					<u-icon name="arrow-down" size="10"></u-icon>
				</view>
			</view>
			<view>
			<task-item v-for="(item,i) in jx_task" :key="i" :item="item"></task-item>
		</view>
		</view>
	</view>
</template>

<script>
import taskItem from './components/task-item.vue'
export default {
	components:{taskItem},
	data(){
		return{
			history:['自由任务','商家任务','点赞'],
			discory:['自由任务','商家任务','点赞','自由任务','商家任务','点赞'],
			sort:[{name:'默认排序'},{name:'最新发布'},{name:'奖励最高'}],
			sort_crt:0,
			jx_task:[
				{name:'商家拉新',coin:1000,top:true,t_name:'互砍任务',jd:52,wc:10,sy:20,src:'https://cdn.uviewui.com/uview/common/logo.png'},
				{name:'商家拉新',coin:1000,top:true,t_name:'互砍任务',jd:0,wc:10,sy:20,src:'https://cdn.uviewui.com/uview/common/logo.png'},
				{name:'商家拉新',coin:1000,top:true,t_name:'互砍任务',jd:1,wc:10,sy:20,src:'https://cdn.uviewui.com/uview/common/logo.png'},
				{name:'商家拉新',coin:1000,top:true,t_name:'互砍任务',jd:52,wc:10,sy:20,src:'https://cdn.uviewui.com/uview/common/logo.png'},
				{name:'商家拉新',coin:1000,top:true,t_name:'互砍任务',jd:52,wc:10,sy:20,src:'https://cdn.uviewui.com/uview/common/logo.png'}
			]
		}
	},
	methods:{
		top(){
			let pdt = 0
			uni.getSystemInfo({  
		        success:function(e){  
		            // #ifndef MP  
		            if(e.platform == 'android') {  
		                pdt = e.statusBarHeight  
		            }else {  
		                pdt = e.statusBarHeight + 45  
		            }  
		            // #endif  
		
		            // #ifdef MP-WEIXIN  
		            let custom = wx.getMenuButtonBoundingClientRect()  
		            pdt = custom.bottom + custom.top - e.statusBarHeight  
		            // #endif  
		
		            // #ifdef MP-ALIPAY  
		            pdt = e.statusBarHeight + e.titleBarHeight  
		            // #endif  
		        }  
		    })  
			return {paddingTop:pdt+'px'}
		},
		ctop(){
			let pdt = 0
			uni.getSystemInfo({  
		        success:function(e){  
		            // #ifndef MP  
		            if(e.platform == 'android') {  
		                pdt = e.statusBarHeight  
		            }else {  
		                pdt = e.statusBarHeight + 45  
		            }  
		            // #endif  
		
		            // #ifdef MP-WEIXIN  
		            let custom = wx.getMenuButtonBoundingClientRect()  
		            pdt = custom.bottom + custom.top - e.statusBarHeight  
		            // #endif  
		
		            // #ifdef MP-ALIPAY  
		            pdt = e.statusBarHeight + e.titleBarHeight  
		            // #endif  
		        }  
		    })  
			return {paddingTop:(pdt+44)+'px'}
		},
		sorts(i){
			this.sort_crt = i
		}
	}
}
</script>

<style lang="scss" scoped>
.container{padding: 0 24rpx;}
.top{height: 88rpx;padding: 18rpx;width: 100%;background-color: #F9F9F9;left:0;top:0;z-index: 10;
	.logo{}
	.search{color: #999;font-size: 28rpx;background-color: #F2F2F2;border-radius: 200rpx;
		padding: 0 24rpx;height: 72rpx;width: 530rpx;
		.s-icon{width: 34.12rpx;height: 34.12rpx;margin-right: 22rpx;}
	}
	.sbtn{font-size: 32rpx;color: #333;font-weight: bold;}
}
.key{margin-top: 32rpx;
	.s-title{font-size: 32rpx;color: #333;font-weight: bold;}
	.item{padding: 8rpx 24rpx;background-color: #F2F2F2;color: #999;font-size: 24rpx;margin: 32rpx 24rpx 0;}
}
.result{margin-top: 32rpx;
	.sort{padding: 20rpx 58rpx 32rpx;color: #333;font-size: 28rpx;
		.s-name{margin-right: 10rpx;}
	}
	.crt-sort{color: #246FDD;}
}
</style>
